<template>
  <ul class="switches">
    <li class="switch-item" v-for="(item,index) in switches" :class="{'active':currentIndex===index}"  @click="switchItem(index)">
      <span>{{item.name}}</span>
    </li>
  </ul>
</template>

<script type="text/ecmascript-6">
  export default {
    props:{
      switches:{
        type:Array,
        default:[]
      },
      currentIndex:{
        type:Number,
        default:0
      }
    },
   methods: {
     switchItem(index){
       this.$emit('switch',index)
     }
   },
  }
</script>
<style scoped lang="scss" rel="stylesheet/scss">
  @import '../../../../src/style/mixin.scss';
 .switches{
   display: flex;
   align-items:center;
   width:100%;
   margin:0 auto;
   .switch-item{
     flex: 1;
     padding: 8px;
     text-align: center;
     font-size: 0.65rem;
     color:$colorText;
     span{
       padding:0.15rem;
     }
     &.active{
       span {
         color:$blue;
         border-bottom: 0.1rem solid $blue;
       }
     }
   }
 }
</style>
